/**
 * resolution输出设备的像素密度，即分辨率；1dppx：表示每个 px 的点数
 */
let mediaQuery = window.matchMedia?.('(resolution: 1dppx)')

/**
 * 检测当前浏览器分辨率
 *
 *
 * */
function checkBrowserResolution(thresholdW) {
    init(thresholdW)
}

/** 判断是否为Windows系统 */
function isWindows() {
    return navigator.platform.startsWith('Win')
}

/** 防抖函数 */
function debounce(fn, delay = 100) {
    let timer
    return ((...args) => {
        clearTimeout(timer)
        timer = window.setTimeout(() => fn(...args), delay)
    })
}

/** 使用 CSS Scale 的缩放调整核心逻辑 */
function adjustScale(thresholdW) {
    let curReslution = Number(((window.outerWidth - 10) / window.innerWidth).toFixed(2))
    let scale = 1
    document.documentElement.style.width = '100%'
    document.documentElement.style.height = '100%'
    if (curReslution == 1) {
        // const viewportWidth  = window.innerWidth || document.documentElement.clientWidth //获取当前分辨率下的可视区域宽度
        const viewportWidth = screen.width //获取当前分辨率下的可视区域宽度
        scale = Number((viewportWidth / thresholdW).toFixed(1)) // 分母——设计稿的尺寸
        document.body.style.zoom = (1 / scale).toString()//放大缩小相应倍数
        document.body.style.scale = scale.toString()
        document.body.style.transformOrigin = '0 0'
        document.body.style.width = `${(1 / scale) * 100}%`
        document.body.style.height = `${(1 / scale) * 100}%`
    } else {
        const dpr = curReslution || 1

        if (dpr === 1) return

        const style = document.documentElement.style
        scale = 1 / dpr

        style.scale = `scale(${scale})`
        style.transformOrigin = '0 0'
        style.width = dpr < 1 ? '100%' : `${dpr * 100}%`
        style.height = '100%'
    }

}

/** 事件监听封装 */
function observeScaleChange() {
    const handler = debounce(adjustScale)
    // 监听分辨率变化
    mediaQuery?.addEventListener('change', handler)
    window.addEventListener('resize', handler)
}

/** 初始化入口 */
function init(thresholdW) {
    if (!isWindows()) return
    adjustScale(thresholdW)
    observeScaleChange()
}


